<template>
    <div class="container">
        <el-card shadow="always">
            <el-form :model="queryParams" :inline="true" label-width="100px">
                <el-form-item label="模块名称" prop="moduleName">
                    <el-input v-model="queryParams.moduleName" placeholder="请输入模块名称" clearable style="width: 240px" />
                </el-form-item>
                <el-form-item label="系统名称" prop="systemName">
                    <el-input v-model="queryParams.systemName" placeholder="请输入系统名称" clearable style="width: 240px" />
                </el-form-item>
                <el-form-item>
                    <el-button type="primary" icon="Search" @click="listLinkItemList">查询</el-button>
                    <el-button @click="unsetQueryForm"><el-icon>
                            <RefreshRight />
                        </el-icon>重置</el-button>
                </el-form-item>
            </el-form>
        </el-card>
        <el-card shadow="always" style="margin-top: 10px;">
            <el-row>
                <el-button type="primary" icon="Plus" @click="showAddLinkItem">新增</el-button>
            </el-row>
            <el-table :data="tableData" style="width: 100%;;margin-top: 5px;" height="calc(100vh - 300px)">
                <el-table-column prop="systemId" label="ID" align="center" />
                <el-table-column prop="moduleName" label="模块名称" align="center" />
                <el-table-column prop="systemName" label="系统名称" align="center" />
                <el-table-column prop="systemSubTitle" label="系统描述" align="center" />
                <el-table-column prop="systemLinkUrl" label="系统链接" align="center" />
                <el-table-column prop="creator" label="创建者" align="center" />
                <el-table-column fixed="right" label="操作" width="150" align="center">
                    <template #default="scope">
                        <el-button link type="primary" icon="Edit" @click="handleEdit(scope.row)">编辑</el-button>
                        <el-button link type="primary" icon="Delete" @click="handleDelete(scope.row)">删除</el-button>
                    </template>
                </el-table-column>
            </el-table>
        </el-card>

        <el-dialog v-model="addDialogVisible" title="新增系统内容" width="600" @closed="closeAddDialog">
            <el-form :inline="true" :model="addForm" label-width="200px" :rules="addRules" ref="addRef">
                <el-form-item label="模块名称" prop="moduleName">
                    <el-input v-model="addForm.moduleName" style="width: 300px" />
                </el-form-item>
                <el-form-item label="系统名称" prop="systemName">
                    <el-input v-model="addForm.systemName" style="width: 300px" />
                </el-form-item>
                <el-form-item label="系统描述" prop="systemSubTitle">
                    <el-input v-model="addForm.systemSubTitle" style="width: 300px" />
                </el-form-item>
                <el-form-item label="系统链接" prop="systemLinkUrl">
                    <el-input v-model="addForm.systemLinkUrl" style="width: 300px" />
                </el-form-item>
            </el-form>
            <template #footer>
                <div class="dialog-footer">
                    <el-button type="primary" @click="doAddLinkItem">
                        确定
                    </el-button>
                    <el-button @click="addDialogVisible = false">取消</el-button>
                </div>
            </template>
        </el-dialog>

        <el-dialog v-model="editDialogVisible" title="修改系统内容" width="600" @closed="closeEditDialog">
            <el-form :inline="true" :model="editForm" label-width="200px" :rules="addRules" ref="editRef">
                <el-form-item label="模块ID" prop="systemId">
                    <el-input v-model="editForm.systemId" style="width: 300px" disabled />
                </el-form-item>
                <el-form-item label="模块名称" prop="moduleName">
                    <el-input v-model="editForm.moduleName" style="width: 300px" />
                </el-form-item>
                <el-form-item label="系统名称" prop="systemName">
                    <el-input v-model="editForm.systemName" style="width: 300px" />
                </el-form-item>
                <el-form-item label="系统描述" prop="systemSubTitle">
                    <el-input v-model="editForm.systemSubTitle" style="width: 300px"
                        placeholder="请以http://或https://开头" />
                </el-form-item>
                <el-form-item label="系统链接" prop="systemLinkUrl">
                    <el-input v-model="editForm.systemLinkUrl" style="width: 300px" />
                </el-form-item>
            </el-form>
            <template #footer>
                <div class="dialog-footer">
                    <el-button type="primary" @click="doEditLinkItem">
                        确定
                    </el-button>
                    <el-button @click="editDialogVisible = false">取消</el-button>
                </div>
            </template>
        </el-dialog>
    </div>
</template>

<script setup>

import { ref } from "vue";
import { queryLinkInfoList, addLinkInfo, updateLinkInfo, deleteLinkInfo } from '@/api/biz/common'
import { ElMessage } from 'element-plus'
const { proxy } = getCurrentInstance();

const tableData = ref([])
const queryParams = ref({})
const addDialogVisible = ref(false)
const editDialogVisible = ref(false)
const addForm = ref({})
const editForm = ref({})

function showAddLinkItem() {
    addDialogVisible.value = true
}

function doAddLinkItem() {
    let param = {
        moduleName: addForm.value.moduleName,
        systemName: addForm.value.systemName,
        systemSubTitle: addForm.value.systemSubTitle,
        systemLinkUrl: addForm.value.systemLinkUrl
    }
    addLinkInfo(param).then(res => {
        ElMessage.success('新增成功！')
        addDialogVisible.value = false
        listLinkItemList()
    })
}

function listLinkItemList() {
    let param = {
        moduleName: queryParams.value.moduleName,
        systemName: queryParams.value.systemName,
    }
    queryLinkInfoList(param).then(res => {
        tableData.value = res.data
    })
}

function closeAddDialog() {
    addForm.value = {}
    addDialogVisible.value = false
}

function closeEditDialog() {
    editDialogVisible.value = false
    editForm.value = {}
}

function handleEdit(row) {
    editDialogVisible.value = true
    editForm.value = row
}

function doEditLinkItem() {
    let param = {
        systemId: editForm.value.systemId,
        moduleName: editForm.value.moduleName,
        systemName: editForm.value.systemName,
        systemSubTitle: editForm.value.systemSubTitle,
        systemLinkUrl: editForm.value.systemLinkUrl
    }
    updateLinkInfo(param).then(res => {
        ElMessage.success('修改成功！')
        editDialogVisible.value = false
        listLinkItemList()
    })

}

function handleDelete(row) {
    let param = {
        id: row.id
    }
    proxy.$modal.confirm('是否确认删除ID为"' + row.systemId + '"的数据项？').then(function () {
        return deleteLinkInfo(param);
    }).then(() => {
        listLinkItemList()
        ElMessage.success('操作成功！')
    }).catch(() => { });
}

listLinkItemList()



</script>